<script lang="ts" setup>
// import { h } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  PicCenterOutlined,
  SecurityScanOutlined,
  KeyOutlined,
  BlockOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const [messageApi, contextHolder] = message.useMessage()
function jump(code) {
  // window.api.chooseFiles()
  router.push(code)
}

function test() {
  messageApi.destroy()
  messageApi.info('敬请期待')
}
const moreMenu: any[] = [
  {
    title: 'pdf加密/解密',
    icon: KeyOutlined,
    click: test
  },
  {
    title: 'pdf压缩',
    icon: PicCenterOutlined,
    click: () => jump('Compress')
  },
  {
    title: 'pdf合并/拆分',
    icon: BlockOutlined,
    click: test
  },
  {
    title: 'pdf资源提取',
    icon: SecurityScanOutlined,
    click: () => jump('ExtractResources')
  }
]
</script>

<template>
  <a-row :gutter="16">
    <a-col :span="12">
      <a-card
        title="pdf转文件"
        :bordered="false"
        style="height: 100%; border-radius: 0"
        class="custom-card"
      >
        <a-flex wrap="wrap" gap="small">
          <a-button type="link" @click="() => jump('PdfToDoc')">pdf转word</a-button>
          <!-- <a-button type="link" @click="test">pdf转ppt</a-button> -->
          <a-button type="link" @click="() => jump('PdfToImg')">pdf转图片</a-button>
          <!-- <a-button type="link">pdf转excel</a-button> -->
        </a-flex>
      </a-card>
    </a-col>

    <a-col :span="12">
      <a-card
        title="文件转pdf"
        :bordered="false"
        style="height: 100%; border-radius: 0"
        class="custom-card"
      >
        <a-flex wrap="wrap" gap="small">
          <a-button type="link" @click="jump('WordToPdf')">word转pdf</a-button>
          <a-button type="link" @click="() => jump('PptToPdf')">ppt转pdf</a-button>
          <!-- <a-button type="link" @click="test">图片转pdf</a-button> -->
          <a-button type="link" @click="() => jump('ExcelToPdf')">excel转pdf</a-button>
        </a-flex>
      </a-card>
    </a-col>
  </a-row>
  <a-divider />
  <a-row :gutter="[16, 16]">
    <a-col :span="6" :xs="12" :sm="6" :md="6" v-for="(item, idx) in moreMenu" :key="idx">
      <a-card
        :title="false"
        :bordered="false"
        style="height: 100%; border-radius: 0"
        class="custom-card other-custom-card"
        @click="item.click"
      >
        <div class="other-box">
          <component :is="item.icon" style="font-size: 40px" class="custom-icon"></component>
          <p style="margin-bottom: 0; margin-top: 15px">{{ item.title }}</p>
        </div>
      </a-card>
    </a-col>
  </a-row>
  <context-holder />
</template>
<style lang="less" scoped>
.custom-card {
  background-color: rgba(243, 243, 243, 0.55);
  .other-box {
    height: 120px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  &.other-custom-card {
    cursor: pointer;
    transition: all 0.3s 0s;
    .custom-icon {
      color: #555;
      transition: all 0.3s 0s;
    }
    &:hover {
      background-color: antiquewhite;
      color: #fca314;
      .custom-icon {
        color: #fca314;
      }
    }
  }
}
</style>
